<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入基本css -->
    <link rel="stylesheet" href="./css/base.css">
    <title>普歌-赤道团队:登录界面调查问卷</title>
    <script>
        alert("欢迎您填写普歌-赤道团队的调查问卷！");
    </script>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?ygigtp');
            src: url('fonts/icomoon.eot?ygigtp#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?ygigtp') format('truetype'),
                url('fonts/icomoon.woff?ygigtp') format('woff'),
                url('fonts/icomoon.svg?ygigtp#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        /* 顶部的一行*/
        .top {
            height: 75px;
            width: 100%;
            background-color: #d6d4d4;
        }

        /* logo设置 */
        .logo {
            float: left;
            width: 65px;
            height: 75px;
            margin-left: 250px;
        }

        .logo img {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
        }

        .top .text {
            display: inline-block;
            padding-left: 80px;
            line-height: 75px;
            font-size: 25px;
            color: #7385a7;
        }

        .middle {
            margin-top: 30px;
            border-top: 1px solid #7385a7;
        }

        .middle .md-top1 {
            margin-top: 20px;
            margin-bottom: 20px;
            /* background-color: pink; */
        }

        .middle .md-top1 h3 {
            font-size: 20px;
        }

        .middle .md-top1 span {
            font-size: 15px;
        }

        /* .middle2 .md-top2  */
        .middle2 .md-top2 {
            border: 1px solid #cce8ff;
            height: 200px;
            /* background-color: skyblue; */
        }

        .middle2 .md-top2 .blue1 {
            height: 60px;
            background-color: #eef6ff;
        }

        .middle2 .md-top2 .blue1 h2 {
            padding: 5px;
        }

        .middle2 .md-top2 .blue1 h2::before {
            content: '\e96d';
            font-family: 'icomoon';
            color: #ff0000;
        }

        .middle2 .md-top2 .blue1 span {
            margin-left: 28px;
            color: #ff0000;
        }

        .middle2 .md-top2 ul {
            margin-top: 10px;
            margin-left: 25px;
            font-size: 10px;
        }

        .middle2 .md-top2 ul li {
            padding: 1px;
        }

        .middle2 .md-top2 ul li span {
            margin-left: 5px;
        }

        /* .middle2 .md-top3  */
        .middle2 .md-top3 {
            border: 1px solid #cce8ff;
            height: 200px;
            /* background-color: skyblue; */
            margin-top: 20px;
        }

        .middle2 .md-top3 .blue2 {
            height: 45px;
            background-color: #eef6ff;
            line-height: 45px;
        }

        .middle2 .md-top3 .blue2 h2 {
            margin-left: 26px;
        }

        .middle2 .md-top3 .blue2 .wenbenkuang {
            margin-top: 20px;
            margin-left: 20px;
        }

        /* .middle2 .md-top4 */
        .middle2 .md-top4 {
            border: 1px solid #cce8ff;
            height: 150px;
            /* background-color: skyblue; */
            margin-top: 20px;
        }

        .middle2 .md-top4 .blue3 {
            height: 45px;
            background-color: #eef6ff;
            line-height: 45px;
        }

        .middle2 .md-top4 .blue3 h2 {
            margin-left: 26px;
        }

        .middle2 .md-top4 .blue3 .puge {
            color: #ff0000;
        }

        .middle2 .md-top4 .name {
            margin-left: 10px;
            margin-top: 10px;
        }

        .middle2 .md-top4 .name1 {
            margin: 5px;
            border: 1px solid #7385a7;
        }

        .middle2 .md-top4 .name2 {
            margin: 5px;
            border: 1px solid #7385a7;
        }

        /* .middle2 .md-top5 */
        .middle2 .md-top5 {
            border: 1px solid #cce8ff;
            height: 30px;
            /* background-color: skyblue; */
            margin-top: 20px;
            margin-bottom: 80px;
            background-color: #eef6ff;
        }

        .middle2 .md-top5 .tijiao {
            text-align: center;
            color: #0070a3;
            line-height: 30px;
            margin-left: 600px;
            border: 1px solid #0070a3;
            border-radius: 20%;
            background-color: #e3f1fa;
        }
    </style>
</head>

<body>
    <div class="top w">
        <div class="logo">
            <img src="./images/chidaologo.png" alt="">
        </div>
        <h3 class="text">普歌-赤道团队:登录界面调查问卷</h3>
    </div>
    </div>
    <div class="middle w">
        <div class="md-top1">
            <h3>尊敬用户您好：</h3>
            <br>
            <span> 为了给您提供更加完善的服务，我们希望收集并了解您在页面的使用情况。对您的配合和支持表示衷心的感谢！</span>
        </div>
        <div class="middle2 w">
            <div class="md-top2">
                <div class="blue1">
                    <h2> 您对登录页面整体满意度如何?</h2>
                    <span>本题必答:</span>
                </div>
                <ul> 您对本次服务的满意度：
                    <br>
                    <li><input type="radio" name="danxuan"><span>非常满意</span> </li>

                    <li> <input type="radio" name="danxuan"><span>满意</span></li>

                    <li><input type="radio" name="danxuan"><span>一般</span></li>

                    <li><input type="radio" name="danxuan"><span>不满意</span></li>

                    <li> <input type="radio" name="danxuan"><span>非常不满意</span></li>
                </ul>
            </div>
            <div class="md-top3">
                <div class="blue2">
                    <h2> 您对登录页面有什么建议，欢迎您在下方留言?（例如：哪里有问题，哪些功能做得不够好等）</h2>
                    <form action="" class="wenbenkuang">
                        <textarea cols="50" rows="5">
                        </textarea>
                    </form>
                </div>
            </div>
            <div class="md-top4">
                <div class="blue3">
                    <h2>如果您对赤道官网的使用体验有任何想法，欢迎微信搜索并关注“<span class="puge">普歌</span>”公众号，参与更多用户体验活动。</h2>
                </div>
                <form action="demo.php" class="name">
                    姓名: <input type="text" class="name1" placeholder="name">
                    <br>
                    电话: <input type="password" placeholder="number" class="name2">
                </form>
            </div>
            <div class="md-top5">

                <a href="./index.html" class="tijiao"> 提交 </a>
            </div>
        </div>
    </div>
</body>

</html>